<template>
<div class="activity-body">
  <div class="activity-ad">
    <div class="rank-tabbox">
      <div class="rank-tabs">
        <div class="rank-tab" :class="{active: teamName === 1}" @click="teamName = 1">
          <div class="rank-team-tit">T1战队{{teamName === 1 ? (fielsStatus >= 1 ? (fielsStatus === 1 ? '（已开始）' : '（已结束）') : '（未开始）') : ''}}</div>
          <div>1级、2级用户</div>
        </div>
        <div class="rank-tab" :class="{active: teamName === 2}" @click="teamName = 2">
          <div class="rank-team-tit">T2战队{{teamName === 2 ? (fielsStatus >= 1 ? (fielsStatus === 1 ? '（已开始）' : '（已结束）') : '（未开始）') : ''}}</div>
          <div>3级、4级用户</div>
        </div>
        <div class="rank-tab" :class="{active: teamName === 3}" @click="teamName = 3">
          <div class="rank-team-tit">T3战队{{teamName === 3 ? (fielsStatus >= 1 ? (fielsStatus === 1 ? '（已开始）' : '（已结束）') : '（未开始）') : ''}}</div>
          <div>5级、vip用户</div>
        </div>
      </div>
    </div>
  </div>
  <div class="activity-wrap">
    <div class="box-over" v-if="fielsStatus === 2">
      <img src="./img/rankcontentbg.png" class="contentbg" alt="">
      <div class="over-head">
        <span class="head-cycle"></span>
        <span>T{{teamName}}战队冲榜信息</span>
        <span class="head-cycle"></span>
      </div>
      <div class="over-item">
        <div class="over-item-head">
          <div>一等奖￥<span>{{teamName === 1 ? '1000' : (teamName === 2 ? '1200' : '1500')}}</span>油卡</div>
          <div>1名</div>
        </div>
        <div class="over-title">一等奖</div>
        <div class="over-cost">
          累计消费额：<span>¥{{rankPopList[0].amount}}</span>
        </div>
        <div class="over-user">中奖者：{{rankPopList[0].username | nicknameReplace(myRankData && myRankData.rank === 1 && myTeamName === teamName)}} {{rankPopList[0].mobile | phoneReplace}}</div>
        <div class="over-imgbox">
          <img v-if="teamName === 1" src="./img/rankprize1b.png" alt="">
          <img v-else-if="teamName === 2" src="./img/rankprize2b.png" alt="">
          <img v-else src="./img/rankprize3b.png" alt="">
          <!-- <div class="over-imgtip">小米手机8 SE</div> -->
        </div>
      </div>
      <div class="over-item">
        <div class="over-item-head">
          <div>二等奖￥<span>{{teamName === 1 ? '388' : (teamName === 2 ? '688' : '888')}}</span>刀具联盟红包</div>
          <div>1名</div>
        </div>
        <div class="over-title">二等奖</div>
        <div class="over-cost">
          累计消费额：<span>¥{{rankPopList[1].amount}}</span>
        </div>
        <div class="over-user">中奖者：{{rankPopList[1].username | nicknameReplace(myRankData && myRankData.rank === 2 && myTeamName === teamName)}} {{rankPopList[1].mobile | phoneReplace}}</div>
        <div class="over-imgbox">
          <img v-if="teamName === 1" src="./img/rankprize1a.png" alt="">
          <img v-else-if="teamName === 2" src="./img/rankprize2a.png" alt="">
          <img v-else src="./img/rankprize3a.png" alt="">
          <!-- <div class="over-imgtip">小米电视4A 32寸</div> -->
        </div>
      </div>
    </div>
    <div class="box-ready" v-else>
      <div class="prizeBox" v-show="teamName === 1">
        <div class="prizeItem">
          <div class="prize-title">一等奖</div>
          <div class="prize-tip">1000元 油卡</div>
          <img src="./img/rankprize1b.png" alt="">
        </div>
        <div class="prizeItem">
          <div class="prize-title">二等奖</div>
          <div class="prize-tip">388元 刀具联盟红包</div>
          <img src="./img/rankprize1a.png" alt="">
        </div>
        <div class="clearbox"></div>
      </div>
      <div class="prizeBox" v-show="teamName === 2">
        <div class="prizeItem">
          <div class="prize-title">一等奖</div>
          <div class="prize-tip">1200元 油卡</div>
          <img src="./img/rankprize2b.png" alt="">
        </div>
        <div class="prizeItem">
          <div class="prize-title">二等奖</div>
          <div class="prize-tip">688元 刀具联盟红包</div>
          <img src="./img/rankprize2a.png" alt="">
        </div>
        <div class="clearbox"></div>
      </div>
      <div class="prizeBox" v-show="teamName === 3">
        <div class="prizeItem">
          <div class="prize-title">一等奖</div>
          <div class="prize-tip">1500元 油卡</div>
          <img src="./img/rankprize3b.png" alt="">
        </div>
        <div class="prizeItem">
          <div class="prize-title">二等奖</div>
          <div class="prize-tip">888元 刀具联盟红包</div>
          <img src="./img/rankprize3a.png" alt="">
        </div>
        <div class="clearbox"></div>
      </div>
      <div class="no-ready" v-if="fielsStatus === 0">
        <img src="./img/rankwait.png" alt="">
        <div>本场活动还未开始，请耐心等待～</div>
      </div>
      <TeamRank style="margin-top: 30px;" isInner :teamProp="teamName" :showNum="12" :rankActivityList="rankActivityList" :fielsStatus="fielsStatus" v-else/>
    </div>
    <div class="box-over" v-if="fielsStatus === 2 && teamName === myTeamName">
      <img src="./img/rankcontentbg.png" class="contentbg" alt="">
      <div class="over-head">
        <span class="head-cycle"></span>
        <span>我的冲榜信息</span>
        <span class="head-cycle"></span>
      </div>
      <div class="over-item" style="height: 130px;">
        <div class="over-item-head">
          <div>我的排名</div>
        </div>
        <div class="over-cost mycost" v-if="loginStatus !== 4">
          <span>{{username || ''}}</span><span>{{mobile ? phoneReplace(mobile) : ''}}</span><span>¥{{myRankData ? myRankData.amount.toFixed(2) : 0}}</span><i>累计消费额：</i>
        </div>
        <div class="over-cost mycost" v-else>
          <div>您尚未登录，前去登录查看排名~</div>
        </div>
      </div>
    </div>
    <div class="rule-box">
      <div class="rule-title">活动声明</div>
      <div class="rule-content">
        <p class="p2">1、活动时间：<strong>12月12日-12月18日17:00，以付款完成为准，排名实时更新</strong>。</p>
        <p class="p2">2、1级和2级、3级和4级、5级和vip分别组成战队T1、T2、T3三个战队。<strong>每个战队前两名用户</strong>按照消费额排名得额外奖励。</p>
        <p class="p2" style="margin-left: 15px;">（消费额相同先达到的用户排名靠前）</p>
        <table class="rule-table">
          <tr>
            <td></td>
            <td>第一名</td>
            <td>第二名</td>
          </tr>
          <tr>
            <td>T1<div>（一级、二级）</div></td>
            <td>1000元油卡</td>
            <td>刀具联盟红包388元</td>
          </tr>
          <tr>
            <td>T2<div>（三级、四级）</div></td>
            <td>1200元油卡</td>
            <td>刀具联盟红包688元</td>
          </tr>
          <tr>
            <td>T3<div>（五级、VIP级）</div></td>
            <td>1500元油卡</td>
            <td>刀具联盟红包888元</td>
          </tr>
        </table>
        <p class="p2" style="margin-left: 15px;"><span class="red">*</span> 特别说明：等级按照活动开始时间的用户等级为准。</p>
        <p class="p2" style="margin-left: 15px;"><span class="red">*</span> 活动结束后，<strong>周四将公示最终获奖名单，客服将在3个工作日内</strong>与获奖用户取得联系，请保持电话畅通。</p>
        <p class="p2">3、消费额：指商品实付款金额，不包含税费、运费、优惠券等！</p>
      </div>
    </div>
    <div class="rule-box">
      <div class="rule-title">活动规则</div>
      <div class="rule-content">
        <p class="p2">1、该活动不支持退、换货！</p>
        <p class="p2">2、活动中奖名单以刀具联盟周四公布的中奖名单为准。</p>
        <p class="p2">3、活动最终解释权归刀具联盟所有。</p>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import TeamRank from './components/teamRank.vue'
import { activityRank } from '@/service/get-data.js'
import { phoneReplace } from '@/tool/tool'
export default {
  components: {
    TeamRank
  },
  computed: {
    userId () {
      return this.$store.state.user.id || undefined
    },
    username () {
      return this.$store.state.user.username || undefined
    },
    mobile () {
      return this.$store.state.user.mobile || undefined
    },
    loginStatus () {
      return this.$store.getters.loginStatus - 0
    },
    myTeamName () {
      let teamName
      // const list = [{1: [1, 2]}, {2: [3, 4]}, {3: [0, 5]}]
      const myLevel = (this.myRankData && this.myRankData.level) || (this.loginStatus === 1 ? this.$store.state.user.level - 0 : 1)
      switch (myLevel) {
        case 1:
        case 2: teamName = 1; break
        case 3:
        case 4: teamName = 2; break
        case 0:
        case 5: teamName = 3; break
      }
      return teamName
    },
    currentTeamRankList () {
      let list = this.rankActivityList && this.rankActivityList.levelRankDetail && this.rankActivityList.levelRankDetail.filter((team, index) => {
        return team['teamName'] === this.teamName
      })
      // && list[0]['rankDetailVOS'] && list[0]['rankDetailVOS']) || []
      return (list && list[0]) || []
    },
    rankPopList () {
      // let list = (overRanks && overRanks[len - 1]['rankDetailVOS'] && overRanks[len - 1]['rankDetailVOS'].slice(0, 3)) || []
      return (this.currentTeamRankList && this.currentTeamRankList['rankDetailVOS'] && this.currentTeamRankList['rankDetailVOS'].slice(0, 2)) || []
    }
  },
  data () {
    return {
      myRankData: {},
      rankActivityList: {},
      fielsStatus: 0,
      teamName: 1
    }
  },
  methods: {
    phoneReplace,
    // 活动排名
    async fetchActivityRank () {
      let res = await activityRank(this.userId || undefined)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.activity = res.data.data
        this.hanleTimer()
        this.teamName = this.myTeamName
      } else {
        this.$message({
          message: res.data.resultMsg,
          type: 'wraming'
        })
      }
    },
    hanleTimer () {
      // 活动已结束
      if (this.activity.openRanks && !this.activity.openRanks.length) {
        let len = this.activity.overRanks && this.activity.overRanks.length
        this.rankActivityList = this.activity.overRanks[len - 1]
        this.myRankData = this.rankActivityList['myRank']
        this.fielsStatus = 2
        return
      }
      this.rankActivityList = this.activity.openRanks[0] || {}
      this.myRankData = this.rankActivityList['myRank']
      // 样式
      let startTimeParm = this.rankActivityList.startTime
      let endTimeParm = this.rankActivityList.endTime
      const starTimeStamp = (new Date(startTimeParm.replace(/-/g, '/'))).getTime()
      const endTimeStamp = (new Date(endTimeParm.replace(/-/g, '/'))).getTime()
      let nowTime = (new Date()).getTime()
      // 活动开始
      if (nowTime > starTimeStamp && nowTime <= endTimeStamp) {
        this.fielsStatus = 1
      } else if (nowTime < starTimeStamp) {
        this.fielsStatus = 0
      }
    }
  },
  mounted () {
    this.fetchActivityRank()
  },
  filters: {
    nicknameReplace (value, isMe) {
      if (isMe || (value && value.length === 1)) { return value }
      let len = value.length
      let hiddenStr = value.substring(2, len)
      if (len === 2) {
        return value.replace(/.{0,1}$/, '*')
      } else if (len > 2) {
        return value.replace(hiddenStr, '****')
      }
    }
  },
  watch: {
  }
}
</script>

<style lang="scss" scoped>
.activity-body{
  background-color: #ffe1e1;
  padding-bottom: 30px;
}
.activity-ad{
  width: 100%;
  height: 600px;
  background-image: url("./img/teamrankbanner.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  .rank-tabbox{
    width: calc(100% - 2px);
    bottom: 0;
    position: absolute;
    .rank-tabs{
      width: 1000px;
      margin: 0 auto;
      font-size: 0;
      overflow: hidden;
      border-radius: 20px 20px 0 0 / 20px 20px 0 0;
      // background-color: #f39f5f;
      .rank-tab{
        width:33.33%;
        height:90px;
        cursor: pointer;
        border: none;
        background: linear-gradient(129deg,rgba(241,229,176,1) 0%,rgba(254,169,72,1) 100%);
        display: inline-block;
        float: left;
        opacity: 0.8;
        div{
          font-size: 16px;
          color: #666666;
          text-align: center;
          margin-top: 15px;
          &:first-of-type{
            font-size: 18px;
            margin-top: 20px;
            color: #333333;
          }
        }
        &.active{
          background: #ffffff;
          opacity: 1;
          div{
            color: #911918;
          }
        }
        &.over{
          background: #FF9A80;
          div{
            color: #9B5E4E;
          }
        }
      }
      .rank-team-tit{
        font-family: PingFangSC-Medium;
      }
    }
  }
}
.activity-wrap{
  width: 1020px;
  margin: 0 auto;
  .prizeBox{
    margin-top: 30px;
    .prizeItem{
      width: 490px;
      height: 400px;
      background: url(./img/rankprizebg2.png);
      background-size: 100% 100%;
      box-shadow:0px 5px 15px 0px rgba(255,127,113,1);
      border-radius: 20px;
      float: left;
      margin: 0 10px;
      text-align: center;
      color: #fff;
      position: relative;
      .prize-title{
        font-size: 25px;
        margin-top: 45px;
        font-weight: 500;
      }
      .prize-tip{
        font-size: 20px;
        margin-top: 20px;
        color: #EAEAEA;
      }
      .prize-num{
        width: 100%;
        font-size: 12px;
        margin-top: 10px;;
        text-align: center;
      }
      &:nth-of-type(1){
        img{
          margin-top: 58px;
          width: 246px;
        }
      }
      &:nth-of-type(2){
        img{
          margin-top: 58px;
          width: 246px;
        }
      }
    }
    .clearbox{ 
      clear: both;
    }
  }
  .no-ready{
    background-color: #fff;
    border-radius: 6px;
    height: 340px;
    margin-top: 30px;
    text-align: center;
    font-size: 20px;
    color: #333333;
    img{
      width: 220px;
      margin-top: 40px;
    }
    div{
      margin-top: 13px;
    }
  }
  .rule-box{
    margin-top: 30px;
    border-radius: 6px;
    overflow: hidden;
    .rule-title{
      height: 60px;
      line-height: 60px;
      background-color: #E33939;
      color: #fff;
      box-sizing: border-box;
      padding-left: 30px;
    }
    .rule-content{
      width: 100%;
      box-sizing: border-box;
      padding: 30px;
      display: inline-block;
      background-color: #fff;
      font-size: 14px;
      .p-title{
        display: inline-block;
        vertical-align: top;
        line-height: 30px;
        color: #666666;
      }
      .p-content{
        display: inline-block;
        line-height: 30px;
      }
      .p2{
        color: #666666;
        line-height: 30px;
        span{
          color:#333333;
        }
        .red{
          font-size: 24px;
          position: relative;
          bottom: -8px;
          color: #CF2121;
        }
      }
      strong{
        font-weight: 500;
        color: #000000;
      }
      .rule-table{
        border: 1px solid #979797;
        margin:7px 0 7px 25px;
        td{
          border: 1px solid #979797;
          line-height: 40px;;
          width: 163px;
          text-align: left;
          padding-left: 10px;
          &:nth-of-type(1){
            padding-left: 0;
            line-height: 20px;
            width: 100px;
            text-align: center;
            div{
              line-height: 10px;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .box-over{
    background-color: #fff;
    border-radius: 12px;
    padding: 0px 45px 52px;
    margin-top: 100px;
    position: relative;
    // background-image: url(./img/rankcontentbg.png);
    background-size: 100% 100%;
    .over-head{
      text-align: center;
      font-size: 24px;
      color: #333333;
      position: relative;
      top: 10px;
      margin-bottom: 40px;
      .head-cycle{
        display: inline-block;
        width:13px;
        height:13px;
        border-radius: 13px;
        opacity:0.5533;
        border:2px solid rgba(255,154,0,1);
      }
    }
    .contentbg{
      width: 1020px;
      position: absolute;
      top: -70px;
      left: 0;
    }
    .over-item{
      height: 290px;
      box-sizing: border-box;
      border: 1px solid #DDDDDD;
      padding: 60px 50px 60px 40px;
      margin-top: 90px;
      position: relative;
      .over-item-head{
        font-size: 20px;
        width: 930px;
        position: absolute;
        left: -1px;
        top: -61px;
        background-color: #FFE35D;
        height: 60px;
        line-height: 60px;
        div{
          margin: 0 20px;
          display: inline-block;
          &:nth-of-type(1){
            float: left;
            span{
              font-size: 24px;
            }
          }
          &:nth-of-type(2){
            float: right;
            font-size: 16px;
          }
        }
      }
      .over-title{
        color: #333333;
        font-size: 24px;
      }
      .over-cost{
        margin-top: 10px;
        font-size: 20px;
        line-height: 40px;
        color: #666666;
        span{
          color: #333333;
          font-size: 24px;
        }
        &.mycost{
          margin-top: -15px;
          span{
            margin-left: 25px;
            float: right;
            &:nth-of-type(1){
              float: left;
            }
            &:nth-of-type(2){
              font-size: 24px;
              color: #666;
              float: left;
            }
          }
          i{
            font-size: 18px;
            float: right;
          }
          div{
            text-align: center;
          }
        }
      }
      .over-user{
        width: 400px;
        height: 70px;
        background-color: #CF2121;
        color: #fff;
        font-size: 20px;
        box-sizing: border-box;
        padding-left: 34px;
        line-height: 70px;
        border-radius: 6px;
        margin-top: 25px;
      }
      .over-imgbox{
        width: 300px;
        position: absolute;
        right: 60px;
        bottom: 0;
        text-align: center;
        .over-imgtip{
          margin-top: 11px;
          font-size: 16px;
          color: #2D2D2D;
        }
        img{
          box-shadow:0px 5px 15px 0px rgba(221,221,221,1);
          border-radius: 15px;
        }
      }
      &:nth-of-type(1){
        .over-imgbox{
          bottom: 62px;
          img{
            width: 246px;
          }
        }
      }
      &:nth-of-type(2){
        .over-imgbox{
          bottom: 62px;
          img{
            width: 246px;
          }
        }
      }
      &:nth-of-type(3){
        .over-imgbox{
          bottom: 62px;
          img{
            width: 246px;
          }
        }
      }
    }
    .own-item{
      margin-top: 30px;
      line-height:100px;
      background:linear-gradient(209deg,rgba(233,119,69,1) 0%,rgba(207,33,33,1) 100%);
      border-radius:6px;
      padding: 0 40px;
      color: #ffffff;
      .title{
        font-size:32px;
      }
      .amount{
        float: right;
        font-weight:500;
        font-size:40px;
      }
    }
    .over-tel{
      box-sizing: border-box;
      padding: 20px 20px 0;
      margin-top: 20px;
      font-size: 20px;
      div{
        &:nth-of-type(2){
          margin-top: 20px;
          a{
            color: #0078D8;
            &:nth-of-type(2){
              margin-left: 20px;
            }
          }
        }
      }
    }
  }
}

</style>
